<!-- 编辑权限 -->
<template>
  <div class="scope-edit">
    <div class="header">编辑权限</div>
    <el-form label-width="120px">
      <el-form-item label="当前角色 :">
        <el-input :value="role.role_name" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <h5 style="color:#ccc;">（ 请为当前角色设置权限模块 ）</h5>
        <el-tree
          :check-strictly="true"
          ref="tree"
          :data="scopesList"
          show-checkbox
          node-key="id"
          :props="{label:'scope_name'}"
        ></el-tree>
      </el-form-item>
      <el-form-item>
        <el-button @click="updateScope" type="primary">修改权限</el-button>
        <el-button @click="setChecked">设置勾选</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      role: {},
      scopes: [], // 当前角色下的权限
      scopesList: [] // 所有系统权限
    };
  },
  created() {
    // 获取当前角色下所有权限
    this.$http.getScopeById({ id: this.$route.params.id }).then(res => {
      if (res && res.data.code === 200) {
        // console.log(res);
        this.role = res.data.data.role
        this.scopes = res.data.data.scopes.scopes.split(",")
      }
    });
    // 当前系统下所有权限
    this.$http.getScopeAll().then(res => {
      if (res && res.data.code === 200) {
        // console.log(res);
        this.scopesList = res.data.data;
        //设置当前角色已经有的权限 - 》 设置勾选状态
        this.$refs.tree.setCheckedKeys(this.scopes);
      }
    });
  },
  methods: {
    // 修改权限
    updateScope(value) {
      let id = this.$route.params.id
      let scopes = this.$refs.tree.getCheckedKeys()
      // console.log(scopes)
      this.$http.updateScope({id, scopes}).then(res => {
        console.log(res)
      })
    },
    setChecked() {
      this.$refs.tree.setCheckedKeys(this.scopes)
    }
  }
};
</script>

<style scoped lang="less">
.scope-edit {
  width: 100%;
  background: #fff;
  .header {
    padding: 15px 0 15px 20px;
    border-bottom: 1px solid #eee;
  }
  .el-form {
    padding: 40px 20px 80px 20px;
    width: 70%;
    margin: 0 auto;
  }
}
</style>
